<template>
   <div  class="container">
      <!-- 会员卡页面  按钮部分 -->
     <div class="handle-box">
         <el-button-group class="ml-4">
             <el-button  type="success"  @click="addMemberCard">添加会员卡</el-button>
         </el-button-group>
       </div>
       <el-divider></el-divider>
    <!-- 会员列表 -->
       <el-table :data="tableData"   border style="width: 100%" >
         <el-table-column prop="name"  sortable label="会员卡名称" width="180"/>
         <el-table-column prop="price" sortable label="价格" width="180" />
         <el-table-column prop="type" sortable label="类型" />
         <el-table-column prop="totalCount" sortable label="可用次数" />
         <el-table-column prop="totalDay" sortable label="有效天数" />
         <el-table-column  label="操作"  width="250">
             <template #default="scope">
                 <el-row  class="btn-opt">
                     <el-button type="primary"  link size="small" @click="memberCardEdit(scope.row)" >编辑</el-button>
                     <el-button type="danger" link size="small" @click="deleteMemberCard(scope.row)">删除</el-button>
             </el-row>
             </template>
         </el-table-column>
         </el-table>
       
         <!-- 分页组件 -->
         <el-row style="margin-top: 30px;">
           <el-col :span="20">
               <el-pagination  v-model:current-page="pageData.pageCurrent"
               :page-size="pageData.pageSize"
                layout="prev, pager, next"   
                :total="pageData.pageTotal"
                background
               @current-change="handleCurrentChange" />
           </el-col>
           </el-row>

           <!--添加修改的组件  -->
           <!-- 添加会员卡 -->
   <el-drawer  v-model="addEditDrawer"  direction="rtl" size="50%"   :before-close="handleClose" >
      <template #header>   
       <h2>{{ drawerTitle }}</h2>
      </template>
      <AddEditMemberCardForm   :memberCardFormData="memberCardFormData"  v-model:addEditDrawer="addEditDrawer" :drawerTitle="drawerTitle"/>
  
   </el-drawer>
   </div> 
</template>

<script setup>
import {ref,reactive} from 'vue'
import {getMemberCard} from '@/api/member'
import { ElMessageBox, ElMessage } from 'element-plus'
import AddEditMemberCardForm from './MemberCardComponent/AddEditMemberCardForm.vue'

const pageData = reactive({
   pageCurrent: 1,
   pageSize: 3,
   pageTotal: 0
})
const handleCurrentChange = (val) => {
   console.log(`current page: ${val}`)
   pageData.pageCurrent = val
   getData()
  
}
const tableData =ref([])
//获取会员开信息
const getData=()=>{
      getMemberCard({pageNum:pageData.pageCurrent,pageSize:pageData.pageSize}).then(res=>{
         console.log(res,'card----')
           //todo 如下实现的分页是假分页  需要后端返回真分页的数据  总数据量 
         let start = (pageData.pageCurrent - 1) * pageData.pageSize;//开始位置
         let end = pageData.pageCurrent * pageData.pageSize;//结束位置 数组的截取的时候 [start,end) suo所以不用-1 
         tableData.value = res.data.slice(start, end)
         pageData.pageTotal = res.data.length
      })
}
//调用方法
getData()
//添加或者修改的抽屉
const  addEditDrawer = ref(false)
const  drawerTitle  = ref('')
const  memberCardFormData = reactive({
   id:null,
   name:'',
   type:'',
   price:'',
   totalCount:'',
   totalDay:'',
   description:'',
   note:''
})
//点击添加会员卡的按钮触发的事件
const addMemberCard = () => {
   console.log('-----------添加会员卡--------------')
   //显示添加会员卡的抽屉
   addEditDrawer.value = true
   drawerTitle.value = '添加会员卡'
    memberCardFormData.id = ''
   memberCardFormData.name = ''
   memberCardFormData.type = ''
   memberCardFormData.price = ''
   memberCardFormData.totalCount = ''
   memberCardFormData.totalDay = ''
   memberCardFormData.description = ''
   memberCardFormData.note = ''

}

//点击编辑按钮触发的事件
const  memberCardEdit=(row)=>{
   console.log('-----------编辑会员卡--------------')
   addEditDrawer.value = true
   drawerTitle.value = '修改会员卡'
   Object.assign(memberCardFormData,row)
/*    memberCardFormData.id=row.id
   memberCardFormData.name=row.name
   memberCardFormData.type=row.type
   memberCardFormData.price=row.price
   memberCardFormData.totalCount=row.totalCount
   memberCardFormData.totalDay = row.totalDay
   memberCardFormData.description = row.description
   memberCardFormData.note = row.note */

}
//点击删除按钮触发的事件
const   deleteMemberCard=(row)=>{
   console.log('-----------删除会员卡--------------')
     ElMessageBox.confirm(
      '你确定要删除此会员卡吗?',
      '提示',
      {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
      }
   )
      .then(() => {
         //todo调用后端接口 删除数据
         console.log('要删除数据的id:',row.id) 
         ElMessage({
            type: 'success',
            message: '删除成功',
         })
      })
      .catch(() => {
         ElMessage({
            type: 'info',
            message: '取消删除',
         })
      })
}




const handleClose = (done) => {
   ElMessageBox.confirm('你确定关闭吗?')
      .then(() => {
         done()
      })
      .catch(() => {
         // catch error
      })
}

</script >
<style lang="less" scoped>
.handle-box {
	margin-bottom: 20px;  
}


.btn-opt{
    font-size: 13px;
    .el-button{
        margin-left: 3px;
        font-size: 13px;
        padding: 1px 6px;
    }
}
</style>